// 导入path模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 导入单独提取文件包
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 加载vue文件
const { VueLoaderPlugin } = require('vue-loader')
// 导出配置
module.exports = {
    entry: './src/index.js',//入口文件
    output: {//输出文件
        path: path.resolve(__dirname, 'dist'),//输出文件路径
        filename: 'main.js'//输出文件名
    },
    plugins: [
        // 以index.html为模板在dist文件中创建html文件
        new HtmlWebpackPlugin({
            template: './index/index.html'
        }),
        // 单独提出css文件在dist中
        new MiniCssExtractPlugin({
            filename: 'index.css'
        }),
        // 打包vue
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {
                // 匹配以.css为后缀的文件 i 忽略大小写
                test: /\.css$/i,
                // 执行从右到左 先打包css文件 再把css提取出来
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                // 匹配以vue后缀的文件
                test: /\.vue$/,
                // 使用vue-loader解析
                loader: 'vue-loader'
            }
        ]
    }
}